<script setup lang="ts">
import { computed, ref, watch, inject } from 'vue'
import * as injectKeys from "@/services/injectKeys";

const datasetServices = inject(injectKeys.datasetKey)!

const infos = computed(() => {
    return datasetServices.getAllDataset().map(ds => {

        const name = ds.name
        const filters = ds.getAllFilters().map(v => {

            return {
                id: v.id,
                filter: v.filter.value
            }
        })

        return {
            name, filters
        }
    })
})

</script>

<template>
    <div>

        <div v-for="info in infos" :key="info.name">
            <p>{{ info.name }}</p>

            <ul>
                <li v-for="f in info.filters">id:{{ f.id }} ;{{ f.filter }}</li>
            </ul>
        </div>

    </div>
</template>

<style scoped></style>